<template>
  <div>
    <!-- 折叠按钮 -->
    <div class="toggle-button" @click="toggleCollapse">|||</div>
    <!-- 侧边栏 -->
    <el-menu
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      router
      :default-active="$route.path"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409bff"
    >
      <!-- 一级菜单 -->
      <el-submenu :index="menu.path" v-for="menu in menuList" :key="menu.id">
        <template slot="title">
          <!-- 一级菜单图标 -->
          <i :class="['iconfont',menuIcon[menu.path]]"></i>
          <!-- 一级菜单文本 -->
          <span>{{menu.authName}}</span>
        </template>

        <!-- 二级菜单 -->
        <el-menu-item :index="menuItem.path" v-for="menuItem in menu.children" :key="menuItem.id">
          <template slot="title">
            <!-- 图标 -->
            <i class="el-icon-menu"></i>
            <!-- 文本 -->
            <span>{{menuItem.authName}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { menuList } from '@/common/mock/mock'
export default {
  data() {
    return {
      menuList,
      //为一级菜单加图标
      menuIcon: {
        '/pay': 'icon-jiaoyi',
        '/merchant': 'icon-shanghuguanli',
        '/channle': 'icon-channel',
        '/order': 'icon-dingdanguanli',
        '/stat': 'icon-tongji'
      },
      isCollapse: false
    }
  },
  methods: {
    //切换菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
      this.$emit('setMenuWidth', this.isCollapse)
    }
  }
}
</script>

<style lang="less" scoped>
.toggle-button {
  background-color: #4a5064;
  color: #fff;
  text-align: center;
  font-size: 10px;
  line-height: 24px;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.el-menu {
  border-right: none;

  .el-submenu {
    color: #fff;

    .iconfont {
      margin-right: 8px;
    }
  }
}
</style>